<template>
  <div class="shipin">
    <div class="header">
      <div class="top">
        <div class="position" @click="selectCity">
          <div class="city">{{ city }}</div>
          <div class="pic">
            <img class="auto-img" src="../assets/sanjiao1.png" alt="" />
          </div>
        </div>
        <div class="search-box" @click="toSearch">
          <van-search v-model="value" placeholder="新蝙蝠侠" shape="round" />
        </div>
      </div>

      <!-- <div class="tabs-box">
        <van-tabs
          v-model="active"
          route
          title-active-color="#333"
          title-inactive-color="#aaa"
          line-width="24px"
        >
          <van-tab
            :title="item.title"
            v-for="(item, index) in tabsData"
            :key="index"
            :to="{ name: item.routeName }"
          >
          </van-tab>
        </van-tabs>
      </div> -->
    </div>

    <!-- <div>
      <router-view></router-view>
    </div> -->

    <div class="recommend">
      <div class="recommend-list">
        <div
          class="recommend-item"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <div class="item-top">
            <div class="video-cover">
              <a href="#">
                <img
                  class="auto-img" :src="item.video.imgUrl" alt=""
                  @click="toWatchVideo(item.video.url)"
                />
                <!-- :src="item.video.imgUrl" -->
              </a>
            </div>
            <div class="sketch">{{ item.title }}</div>
            <div class="play" @click="toWatchVideo(item.video.url)">
              <van-icon name="play" color="#ccc" size="32px" />
            </div>
            <!-- <div class="video-time">{{ item.video.dur }}</div> -->
            <div class="video-time" v-if="item.video">{{ item.video.dur }}</div>
          </div>
          <div class="item-bottom clearfix">
            <div class="video-source fl">
              <div class="avatar">
                <img class="auto-img" :src="item.user.avatarurl" alt="" />
              </div>
              <div class="user-name">{{ item.user.nickName }}</div>
            </div>
            <div class="fr">
              <div class="zan" @click="item.upCount += 1">
                <div class="zan-icon">
                  <img
                    class="auto-img"
                    src="../assets/video-praise.png"
                    alt=""
                  />
                </div>
                <div class="zan-num">{{ item.upCount }}</div>
              </div>

              <div class="comment" @click="showPopup">
                <div class="comment-icon">
                  <img
                    class="auto-img"
                    src="../assets/video-comment.png"
                    alt=""
                  />
                </div>
                <div class="comment-num">{{ item.commentCount }}</div>
              </div>

              <div class="share-icon" @click="showShare = true">
                <img class="auto-img" src="../assets/video-share.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelectShare"
    />
    <div class="comment-pop">
      <van-popup
        v-model="showPop"
        position="bottom"
        :style="{ height: '70%' }"
        closeable
        round
      >
        <div class="title">评论</div>

        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="天了噜，没有找到相关内容。"
        />

        <div class="bottom">
          <van-cell-group>
            <van-field class="input" v-model="value" placeholder="写评论..." />
          </van-cell-group>
          <button class="send-btn">发送</button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Shipin",
  data() {
    return {
      value: "",
      active: 0,
      tabsData: [
        {
          title: "推荐",
          routeName: "Recommend",
        },
        {
          title: "热片解读",
          routeName: "Unscramble",
        },
        {
          title: "预告片",
          routeName: "Trailer",
        },
        {
          title: "说电影",
          routeName: "SayMovie",
        },
        {
          title: "佳片",
          routeName: "GoodFilm",
        },
        {
          title: "剧综",
          routeName: "Juzong",
        },
      ],
      // 视频列表
      videoList: [],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      showPop: false,
      // dur:''
    };
  },
  computed: {
    ...mapState(["city"]),
  },
  created() {
    this.getVideoList();
  },
  methods: {
    // 获取视频列表数据
    getVideoList() {
      let offset = 0;
      this.axios({
        method: "get",
        // offset 10的倍数
        url: `/video/10`,
      })
        .then((result) => {
          
          // if ((result.data.success = true)) {
            this.videoList = result.data.data.feeds;

            

            // this.videoList.forEach((ele) => {
            for (let i = 0; i < this.videoList.length; i++) {
              let duration = this.videoList[i].video.dur;
              // 

              let minutes = Math.floor(duration / 60);
              minutes = minutes >= 10 ? minutes : "0" + minutes;

              let second = Math.floor(duration % 60);
              second = second >= 10 ? second : "0" + second;

              this.videoList[i].video.dur = `${minutes}:${second}`;

              // 
              // this.dur = `${minutes}:${second}`;
            }
          // }
        })
        .catch((err) => {
          
        });
    },
    selectCity() {
      //
      this.$router.push({ name: "Citylist" });
    },
    toSearch() {
      this.$router.push({ name: "Search" });
    },
    toWatchVideo(url) {
      this.$router.push({ name: "WatchVideo", query: { video: url } });
    },
    onSelectShare() {
      Toast(option.name);
      this.showShare = false;
    },
    showPopup() {
      this.showPop = true;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  // border: 1px solid #000;
  width: 100%;
  height: 95px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .top {
    background-color: #dd403b;
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    .position {
      display: flex;
      align-items: center;
      .city {
        font-size: 16px;
        color: #fff;
      }
      .pic {
        width: 10px;
        margin-left: 6px;
      }
    }

    .search-box {
      flex: 1;
      padding-right: 36px;
      margin-left: 24px;
      .van-search {
        background-color: transparent;
        padding: 0px;
        .van-search__content {
          background-color: #fff;
          .van-cell {
            padding-top: 4px;
          }
        }
      }
    }
  }
  .tabs-box {
    // border: 1px solid #00f;
    /deep/ .van-tab--active span {
      font-size: 18px;
    }
    /deep/ .van-tab__text {
      font-size: 15px;
    }
  }
}
.recommend {
  // border: 1px solid #000;
  margin-top: 46px;
  margin-bottom: 50px;
}
.recommend-list {
  // border: 1px solid #00f;
  padding-top: 4px;
  // overflow-y: auto;
  .recommend-item {
    // border: 1px solid #000;
    margin-bottom: 14px;
    padding-bottom: 10px;
    .item-top {
      position: relative;
      // padding: 12px;
      .sketch {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #fff;
        font-size: 18px;
      }
      .play {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -30px;
        margin-left: -30px;
      }
      .video-time {
        // border: 1px solid #00f;
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: #fff;
        font-size: 14px;
      }
    }
    .item-bottom {
      // border: 1px solid #00f;
      margin-top: 10px;
      padding: 0 14px;
      .video-source {
        display: flex;
        align-items: center;
        .avatar {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          // border: 1px solid #000;
          overflow: hidden;
        }
        .user-name {
          font-size: 15px;
          color: #666;
          margin-left: 8px;
        }
      }
      .fr {
        // border: 1px solid #000;
        display: flex;
        align-items: center;
        .zan,
        .comment {
          // border: 1px solid #000;
          display: flex;
          align-items: center;
          margin-right: 22px;
          .zan-icon,
          .comment-icon {
            width: 22px;
          }
          .zan-num,
          .comment-num {
            font-size: 14px;
            // color: #000;
            margin-left: 4px;
            margin-top: 2px;
          }
        }
        .share-icon {
          width: 22px;
        }
      }
    }
  }
}
.comment-pop {
  position: relative;
  .title {
    // border: 1px solid #000;
    font-size: 18px;
    padding: 14px;
    border-bottom: 1px solid #eee;
  }
  .van-empty {
    // border: 1px solid #000;
    margin-top: 30px;
  }
  .custom-image .van-empty__image {
    width: 100px;
    height: 100px;
  }
  .bottom {
    position: absolute;
    bottom: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .input {
      width: 260px;
      background-color: #f0f0f0;
      color: #fff;
      border-radius: 20px;
    }
    .send-btn {
      width: 60px;
      height: 36px;
      background-color: #dd403b;
      color: #fff;
      font-size: 14px;
      border-radius: 10px;
      margin-left: 18px;
    }
  }
}
</style>